---
title: 'How to Create Fully Reusable React Components'
publishedAt: '2023-12-14'
lastUpdated: '2024-04-21'
description: 'Creating a component is fairly easy, but doing them correctly is a different story.'
englishOnly: 'true'
banner: 'jeremy-bishop-QUwLZNchflk-unsplash'
tags: 'nextjs,react,tailwindcss'
---

## Introduction

Creating a React component is fairly easy, just a function like this.

```tsx
export default function Card() {
  return <div>card</div>;
}
```

Then you can call them using JSX like `<Card />`, and it’s done.

However, **to do them correctly** is the reason that I write this blog. I’ve been wanting to write this for quite some time.

Doing them correctly may come naturally to developers who have been writing React for quite a while, but not for beginners. This is something that I learned the hard way over experience, nobody really taught me this. I want you who are currently reading to get them quickly.

## The Common Flaw

If you look at the Card component that I created above, it has one **crucial** flaw: **it’s not fully reusable.**

> But wait, it is reusable?! I can use them multiple times in different files.

Well yes, you can.

```tsx
// order page
<Card />;

// product list page
<div>
  {products.map((product) => (
    <Card />
  ))}
</div>;
```

But they are not **fully reusable**.

A fully reusable component is what I call a component that is enjoyable to use. While the flawed ones frustrate you every time you need to customize them. It’s something that actually helps you code quickly by being fully reusable.

First, let's see how the flawed component looks like.

## Flawed Component in Action

Let’s say we have a layout like this

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/fully-reusable-component/normal-layout-three'
  alt='normal-layout-three'
  width={600}
  height={396}
/>

We can easily achieve them using this code:

_I use Tailwind CSS for this demo, but the concept applies to all solutions._

```tsx /grid-cols-3/
export default function ProductListPage() {
  return (
    <div className='grid-cols-3'>
      {products.map((product) => (
        <Card key={product.id} product={product} />
      ))}
    </div>
  );
}

function Card({ product }: { product: Product }) {
  return <div className='border p-1'>{product.title}</div>;
}
```

So we have a three-column grid, and we map all of the cards inside that grid. Inside the card we have a product props that renders the title. Pretty simple right?

Here’s how it went haywire.

## Customization in Flawed Components

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/fully-reusable-component/layout-with-featured'
  alt='layout-with-featured'
  width={600}
  height={400}
/>

One day your lovely designer has requests:

- Make the first card span over 2 columns (it’s for featured products)
- When we click a product with a title containing ‘yay’, I want them to shoot out confetti by calling `confetti()`.

Well, you could create two brand new components called `FeatureCard` and `ConfettiCard`, but it’s **counter-productive.** Everything inside is totally the same, except one uses two columns, and one shoots confetti.

Usually, when have this kind of situation, we rely upon custom props for each condition. But it goes downhill pretty quickly as the requirements grow.

```tsx {3-4,6-7,17-19,22}
interface CardProps {
  product: Product;
  isFeatured?: boolean;
  shootsConfetti?: boolean;

  isFeaturedThreeColumns?: boolean;
  isFeaturedButMakeItPop?: boolean;
  // 20 other props that your designer needs
}

function Card({ product, ...props }: CardProps) {
  return (
    <div
      // clsx is a simple library to combine string together
      className={clsx([
        'border p-1',
        props.isFeatured && 'col-span-2',
        props.isFeaturedThreeColumns && 'col-span-3',
        props.isFeaturedButMakeItPop && 'bg-pink-500',
      ])}
      onClick={() => {
        if (props.shootsConfetti) {
          confetti();
        }
      }}
    >
      {product.title}
    </div>
  );
}
```

I agree that using custom props sometimes is the best solution, but we can totally solve this problem if we can directly pass `className` and `onClick` directly into the component.

## Fully Reusable Component as A Solution

So what we basically need is to have all props that are in a div, that concludes `className`, `onClick`, `onHover`, `title`, `aria-label`, `style`, `about`, `id`, `onMouseEnter`, `onMouseLeave`—yeah, you got my point.

It’s A LOT.

Don’t worry. We have a type for that, may I introduce `React.ComponentPropsWithoutRef<'div'>`. So instead of adding each and every component props, we can use this helpful type.

`React.ComponentPropsWithoutRef` also applies to any element you’re using: `<'input'>`, `<'button'>`, anything!

```tsx showLineNumbers /React.ComponentPropsWithoutRef<'div'>/ /...rest/
interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
  product: Product;
}

// first we grab the rest of the props using rest parameter,
function Card({ product, ...rest }: CardProps) {
  // then spread them back to our div
  return <div {...rest}>{product.title}</div>;
}
```

For those of you who are not familiar with `...`, it actually represents 2 distinct operators: Rest Parameters & Spread Operators

1. [Rest Parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) (line 6) is used to get all of the properties from objects when [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
2. [Spread Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (line 8) is used to spread all of the properties back to the object.

The best thing is we now get autocomplete! Woohoo!

<CloudinaryImg
  mdx
  publicId='theodorusclarence/blogs/fully-reusable-component/autocomplete'
  alt='autocomplete'
  width={400}
  height={360}
/>

With the updated component, we can finally make our designer happy with this implementation

```tsx {8,9-11}
export default function ProductListPage() {
  return (
    <div className='grid-cols-3'>
      {products.map((product, i) => (
        <Card
          key={product.id}
          product={product}
          className={clsx([i === 0 && 'col-span-2'])}
          onClick={() => {
            if (product.title.contains('yay')) confetti();
          }}
        />
      ))}
    </div>
  );
}
```

We can add the two-columns feature by adding a custom `className`, and the confetti feature by adding an `onClick` directly in the `Card` component.

### Important Note about Fully Reusable Component

While it is a good practice to spread all of the props, do note that **not all component needs to be fully reusable**.

For example, a `ProductList` component that renders a list of products, probably only needs to be customizable in the `className` props. You can use `Pick` for that, and take only the `className` props.

```tsx /Pick/
interface ProductListProps
  extends Pick<React.ComponentPropsWithoutRef<'div'>, 'className'> {
  product: Product;
}

// No need to spread since we only need className
export default function ProductList({ className, products }: ProductListProps) {
  return (
    <div className={cn(['grid-cols-3', className])}>
      {products.map((product, i) => (
        <Card key={product.id} product={product} />
      ))}
    </div>
  );
}
```

We can just pick what we need from `React.ComponentPropsWithoutRef<'div'>` and use them in our component.

Some components that might need to be fully reusable are:

- Reusable basic components like `Button`, `Input`, `Select`, `Textarea`, etc.
- Reusable UI components like `Modal`, `Popover`, `Tooltip`, etc.

Do emphasize on the word **reusable** here. Make sure you're using this '_fully reusable component_' concept to a reusable component.

### Using Interface vs Type

Based on [Matt Pocock's blog](https://www.totaltypescript.com/react-apps-ts-performance?ref=theodorusclarence.com), `interface Props extends .. {}{:ts}` is slightly faster than `type Props = .. & {}{:ts}`.

Use `interface extends{:ts}`.

## Common Pitfalls & Solutions

By using fully reusable components, there are some pitfalls that you might encounter. I compiled some of them along with the solutions that I came up with.

### Class Name Conflict

If you’re using Tailwind CSS, sometimes merging classes will cause a conflict.

```tsx /clsx(['mt-4', className])/
function Card({
  product,
  // Don't forget to take className out of the rest parameter
  className,
  ...rest
}: CardProps) {
  return (
    <div className={clsx(['mt-4', className])} {...rest}>
      {product.title}
    </div>
  );
}

<Card className='mt-12' />;
```

We merge the `className` using `clsx` function, so any class that we pass outside of the component will be reflected in the final code.

However, in the rendered code we will have two different margin-top classes.

```tsx
<div class='mt-12 mt-4'>...</div>
```

Which is not good. We can use [tailwind-merge](https://www.npmjs.com/package/tailwind-merge) library to solve that.

tailwind-merge's function will return the latest value in the parameter. So it will prioritize our `mt-12` over the `mt-4`. Basically what we need.

```tsx
import { twMerge } from 'tailwind-merge';

twMerge('mt-4 bg-red hover:bg-dark-red', 'mt-12 bg-[#B91C1C]');
// → 'mt-12 bg-[#B91C1C] hover:bg-dark-red'
```

I usually create a wrapper with `clsx` like this

```tsx title="/src/lib/utils.ts"
import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

/** Merge classes with tailwind-merge with clsx full feature */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

So we now can merge conflicts and compose classes neatly.

You can safely customize your component now!

```tsx /cn/
interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
  product: Product;
}

function Card({ product, className, ...rest }: CardProps) {
  return (
    <div className={cn(['mt-4', className])} {...rest}>
      {product.title}
    </div>
  );
}
```

### Multiple Class Names

When you start to have more items inside the component, it can be quite confusing as to how to pass a `className` to a specific element.

Let’s say our `Card` component has a title, description, and image. We already use `className` props for the wrapper div. How can we customize the title class?

```tsx
interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
  product: Product;
}
function Card({ product, className, ...rest }: CardProps) {
  return (
    <div className={cn('mt-4', className)} {...rest}>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
      <img src={product.image} />
    </div>
  );
}

// How to access h1, p, and img?
<Card className='' />;
```

In my experience, I always use the normal `className` for the outermost element (wrapper). The solution is to create another object for a specific element that I might need.

```tsx {3-7}
interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
  product: Product;
  classNames?: {
    title?: string;
    description?: string;
    image?: string;
  };
}
function Card({ product, className, classNames, ...rest }: CardProps) {
  return (
    <div className={clsx('mt-4', className)} {...rest}>
      <h1 className={cn(classNames?.title)}>{product.title}</h1>
      <p className={cn(classNames?.description)}>{product.description}</p>
      <img className={cn(classNames?.image)} src={product.image} />
    </div>
  );
}

<Card classNames={{ title: 'text-red-500', image: 'aspect-square' }} />;
```

Here I created a `classNames` object with `title`, `description`, and `image` property. Then we can use them to merge the class in the respective element.

If you're using [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss), another pro tip is to add this to your VSCode settings.

```json title=".vscode/settings.json"
{ "tailwindCSS.classAttributes": ["class", "className", "classNames"] }
```

Adding this will enable Tailwind CSS IntelliSense to autocomplete in the `classNames` object.

### Components With Ref

You might notice that the type name is `ComponentProps_Without_Ref`, yes there is another type called `ComponentProps_With_Ref`.

This is a needed case if you’re also forwarding ref to your component. I won’t explain in detail about ref forwarding, maybe in the next post (comment if you’d like me to write about it).

Simply, ref forwarding is needed when you want to access the ref value of your component. Usually external library like [Radix](https://www.radix-ui.com/primitives) does.

You can add the type like this.

```tsx /React.ComponentPropsWithRef/ /React.forwardRef/
type ButtonProps = React.ComponentPropsWithRef<'button'>;

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, children, ...rest }, ref) => {
    return (
      <button ref={ref} className={cn(className)} {...rest}>
        {children}
      </button>
    );
  }
);

export default Button;
```

Only then you can access the ref.

```tsx /ref={buttonRef}/ {5}
function Page() {
  const buttonRef = React.useRef<HTMLButtonElement>(null);

  React.useEffect(() => {
    buttonRef.current?.focus();
  }, []);

  return (
    <div>
      <Button type='submit' disabled ref={buttonRef}>
        Submit
      </Button>
    </div>
  );
}
```

_See how I easily add type and disabled props because we’re using a fully reusable component? \*chef’s kiss\*_

## Conclusion

Please use fully reusable components. Your teammates and your future-self will thank you.
